<template>
  <div class="competency-view">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="view-card">
          <template #header>
            <div class="card-header">
              <span>员工岗位胜任力判断</span>
            </div>
          </template>

          <div class="assessment-controls">
            <el-form :model="assessmentForm" label-width="120px">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="选择员工">
                    <el-select
                      v-model="assessmentForm.employeeId"
                      placeholder="请选择员工"
                      filterable
                      @change="onEmployeeChange"
                    >
                      <el-option
                        v-for="employee in employees"
                        :key="employee.id"
                        :label="employee.name"
                        :value="employee.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="目标岗位">
                    <el-select
                      v-model="assessmentForm.targetPosition"
                      placeholder="请选择目标岗位"
                      filterable
                    >
                      <el-option
                        v-for="position in positions"
                        :key="position.id"
                        :label="position.positionName"
                        :value="position.positionName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="handleAssessment"
                      :loading="loading"
                      :disabled="
                        !assessmentForm.employeeId ||
                        !assessmentForm.targetPosition
                      "
                    >
                      <el-icon><Search /></el-icon>
                      开始评估
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <!-- 员工数据展示 -->
          <EmployeeProfile
            v-if="selectedEmployee"
            :employee="selectedEmployee"
            class="profile-section"
          />

          <!-- 评估结果 -->
          <AssessmentReport
            v-if="assessmentResult"
            :result="assessmentResult"
            class="report-section"
          />

          <!-- 无数据提示 -->
          <el-empty
            v-if="!assessmentResult && !loading"
            description="请选择员工和目标岗位进行评估"
            class="empty-state"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useStore } from "vuex";

import EmployeeProfile from "@/components/EmployeeProfile.vue";
import AssessmentReport from "@/components/AssessmentReport.vue";
import api from "@/services/api";

export default {
  name: "CompetencyView",
  components: {
    Search,
    EmployeeProfile,
    AssessmentReport,
  },
  setup() {
    const store = useStore();

    const assessmentForm = ref({
      employeeId: "",
      targetPosition: "",
    });
    const selectedEmployee = ref(null);
    const assessmentResult = ref(null);
    const loading = ref(false);

    const employees = computed(() => store.state.employees);
    const positions = computed(() => store.state.positions);

    const loadData = async () => {
      try {
        await Promise.all([
          store.dispatch("loadEmployees"),
          store.dispatch("loadPositions"),
        ]);
      } catch (error) {
        ElMessage.error("数据加载失败");
      }
    };

    const onEmployeeChange = async (employeeId) => {
      try {
        const response = await api.getEmployeeData(employeeId);
        selectedEmployee.value = response.data;
      } catch (error) {
        ElMessage.error("加载员工数据失败");
      }
    };

    const handleAssessment = async () => {
      if (
        !assessmentForm.value.employeeId ||
        !assessmentForm.value.targetPosition
      ) {
        ElMessage.warning("请选择员工和目标岗位");
        return;
      }

      loading.value = true;
      try {
        const response = await api.getComprehensiveAssessment(
          assessmentForm.value
        );
        assessmentResult.value = response.data;
        ElMessage.success("评估完成");
      } catch (error) {
        ElMessage.error("评估失败");
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      loadData();
    });

    return {
      assessmentForm,
      selectedEmployee,
      assessmentResult,
      loading,
      employees,
      positions,
      onEmployeeChange,
      handleAssessment,
    };
  },
};
</script>

<style scoped>
.competency-view {
  height: 100%;
}

.view-card {
  min-height: 600px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assessment-controls {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.profile-section,
.report-section {
  margin-top: 20px;
}

.empty-state {
  margin: 60px 0;
}
</style>
